<template>
  <div class="container">
    <div class="operate">
      <slot></slot>
      <div style="margin-right: auto"></div>
      <slot name="op"></slot>
    </div>
    <!-- 内容部分 -->
    <div
      v-if="!!adminList.length || !!userList.length"
      class="content"
      :style="{ maxHeight: item.h * 40 - 70 + 'px' }"
    >
      <div v-if="!!adminList.length">管理员</div>
      <div class="block">
        <div v-for="ele in adminList" :key="ele.avatar" class="block-item">
          <div class="detail">
            <el-avatar size="small" :src="ele.avatar" />
            <div style="font-size: 12px; transform: scale(0.8)">
              {{ ele.name }}
            </div>
          </div>
        </div>
      </div>
      <div v-if="!!userList.length" style="margin-top: 5px">普通用户</div>
      <div class="block">
        <div v-for="ele in userList" :key="ele.avatar" class="block-item">
          <div class="detail">
            <el-avatar size="small" :src="ele.avatar" />
            <div style="font-size: 12px; transform: scale(0.8)">
              {{ ele.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <NoData v-else />
  </div>
</template>

<script setup lang="ts">
  /**
   * @description 业务组件 -- 项目成员
   */
  import { ref } from "vue";
  const props = defineProps(["item"]);
  import NoData from "./commonCom/NoData.vue";
  const adminList = ref(
    props.item.data?.projectMemberVOList?.filter(
      (ele: any) => ele.id === "1",
    ) ?? [],
  );
  const userList = ref(
    props.item.data?.projectMemberVOList?.filter(
      (ele: any) => ele.id !== "1",
    ) ?? [],
  );
</script>

<style scoped lang="scss">
  .container {
    box-sizing: border-box;
    padding: 0px 10px 10px;
    height: 100%;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    .content {
      flex: 1;
      display: flex;
      flex-direction: column;
      margin-top: 10px;
      overflow: auto;
      .block {
        margin: 5px 0px;
        display: flex;
        align-items: center;
        flex-direction: row;
        .block-item {
          margin-right: 10px;
        }
      }
      .detail {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
  }
  .operate {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }
</style>
